README-
This project is called RAG Chatbot for Single Object Proof of Concept:
It is a specialized conversational AI chatbot focused on one significant Wolfsonian object, using Retrieval-Augmented Generation (RAG) to provide accurate, source-grounded responses based on museum scholarship, curatorial research, exhibition catalogs, and contextual materials. This serves as a proof of concept for scaling to the broader collection.


Directory Structure:
frontend/
│
├── app/
│   │
│   ├── accessibility/
│   │
│   ├── api/
│   │
│   ├── camera/
│   │
│   ├── chat/
│   │
│   ├── component/
│   │
│   └── panel/
│
├── lib/                   
│   │
│   └── ai/
│
└── public/
   │
   └── assets/


Key Features:
- Chat Interface ReactUI
- Voice Input/Output via Web Speech API  
- 3D Panel viewer with interactive lighting simulation  
- RAG-powered Retrieval from museum documents 
- Accessibility Controls for vision and hearing needs  
- Server-side AI Integration for secure model management


Detailed Component Descriptions:
Frontend Application Structure

1. API Layer (`app/api/route.ts`)
- Purpose: Server-side chat endpoint
- Handles: POST requests with chat message history
- Responsibilities:
	- Validates incoming messages
	- Calls `generateChatReply()` from AI library
	- Returns assistant responses + RAG status flag
	- Error handling with user-friendly messages


2. Chat Component (`app/component/chat.tsx`)
- Purpose: Main conversational UI
- Features:
	- Message history display with user/assistant distinction
	- Real-time typing with auto-growing textarea
	- Speech recognition (mic button)
	- Text-to-speech playback (speaker button)
	- RAG context indicator badge
	- Accessibility integration (text size, letter spacing)
	- State Management**:
	- Messages array with IDs and metadata
	- Loading/listening states
	- Speech synthesis status
	- Live transcript during voice input


3. Glass Scene Component (`app/component/GlassScene.tsx`)
- Purpose: Interactive 3D visualization of Harry Clarke window
- Features:
	- Real-time 3D rendering with Three.js
	- 8 glass panels with physical materials (transmission, clearcoat, roughness)
	- Dynamic lighting based on time-of-day slider (sunrise → night)
	- Orbit controls for mouse/touch interaction
	- Fullscreen mode toggle
	- Panel navigation arrows (left/right)
	- Loading overlay with progress indicator
- Technical:
	- Uses React Three Fiber for React-Three.js integration
	- Physically-based materials for realistic glass
	- Sky dome that changes color with time of day
	- Shadow rendering and directional lighting


4. Chat Page (`app/chat/page.tsx`)
- Purpose: Container for chat interface
- Combines: GlassScene + ChatUI side-by-side
- Layout: Responsive grid with 3D viewer and chat panel


5. AI Library (`lib/ai/`)
config.ts
- Loads environment variables
- Validates Pinecone/Ollama configuration
- Exports: `aiConfig` object with all settings

ollama.ts
- Initializes ChatOllama client
- Connects to local Ollama server (default: `http://127.0.0.1:11434`)
- Uses LangChain JS library

messages.ts
- Formats chat messages for LangChain
- Converts between UI and LangChain message formats
- Defines system prompt for Harry Clarke expertise
- Base system prompt: Instructs AI to act as museum expert on Harry Clarke

chat.ts
- Main orchestration for chat replies
- Processes message history
- Retrieves context from Pinecone (if RAG enabled)
- Builds enhanced system prompt with retrieved context
- Invokes Ollama model
- Returns reply + RAG usage flag

retrieval.ts
- Connects to Pinecone vector database
- Searches for semantically similar documents
- Deduplicates results
- Returns formatted context blocks with metadata
- Gracefully returns empty string if RAG disabled


6. Accessibility Module (`lib/accesabilityStorage.ts`)
- Stores user preferences (text size, letter spacing)
- Persists to browser localStorage
- Allows users to customize interface readability